import React, { Fragment, CSSProperties } from "react";
import { ScrollView } from "@tarojs/components";
import { FlatList, ViewabilityConfig, ViewStyle } from "react-native";

let RNFlatList: React.ComponentType<any>;


if (process.env.TARO_ENV === "rn") {
    RNFlatList = require("react-native").FlatList;
}

type Props = {
    data: Array<any>
    renderItem({ item: any, index: number }): React.ReactElement
    ItemSeparatorComponent?: React.ComponentType<any>,
    ListFooterComponent?: React.ComponentType<any>,
    ListEmptyComponent?: React.ComponentType<any>,
    refreshing?: boolean,
    onRefresh?(): void,
    style?: CSSProperties,
    horizontal?: boolean
    onEndReached?(): void,
    showsVerticalScrollIndicator?: boolean
    onViewableItemsChanged?(event: any): void
    viewabilityConfig?: ViewabilityConfig,
    numColumns?: number,
    contentContainerStyle?: ViewStyle,
    getItemLayout?: Function,
    keyExtractor?:((item: any, index: number) => string);
    onEndReachedThreshold?:number

}

const DBScrollView = (props: Props) => {
    const { data, renderItem, ItemSeparatorComponent, refreshing, onRefresh, style, horizontal, onEndReached } = props;
    const list = data || [];
    return (
        <Fragment>
            {process.env.TARO_ENV === "rn" ? <RNFlatList 
              {...props}
            /> : <ScrollView  style={style} showScrollbar={false} enableBackToTop refresherEnabled refresherTriggered={refreshing} onRefresherRefresh={onRefresh} scrollY={!horizontal} scrollX={horizontal} onRefresherRestore={(...args) => {
                console.log(args);
            }} onScrollToLower={onEndReached}
            >
                {list.map((item, index) => {
                    return (<Fragment key={index}>
                        {renderItem({ item, index })}
                        {ItemSeparatorComponent}
                    </Fragment>);
                })}

            </ScrollView>}
        </Fragment>

    );
};


export default DBScrollView;